var UserAllListUrl = "/GetAllUserServlet";
var UpdateUserUrl = "UpdateUserByCardIdServlet";
var DeleteUserUrl = "/DeleteUserServlet";

$(function () {
    // 初始化分页列表
    userManage.initList();
})

var userManage = {};

userManage.initList = function () {
    $("#userList").bootstrapTable({
        url:UserAllListUrl,//请求路径 **********************************
        method: 'post', //请求方式(*)
        contentType: 'application/x-www-form-urlencoded', //使用from表单方式提交(*)
        toolbar: '#toolbar', //工具按钮的容器
        striped: true, //是否启用隔行变色
        cache: false, //使用是否缓存 默认为true,所以一般情况下需要设置一下为false (*)
        pagination: true, //是否显示分页(*)
        sortable: false, //使用启用排序
        sortOrder: 'ASC', //排序方式
        queryParams: userManage.queryParams, //传递参数(*)  *************************************************
        queryParamsType: '',
        sidePagination: 'server', // 分页方式有两种 1.client 客户端分页  2.server分页
        pageNumber: 1, //初始化页数为第一页  显示第几页
        pageSize: 5, //默认每页加载行数
        pageList: [10, 25, 50, 100], //每页可选择记录数
        strictSearch: true,
        showColumns: false, // 是否显示所有的列
        showRefresh: false, // 是否显示刷新按钮
        minimumCountColumns: 2, // 最少允许的列数
        clickToSelect: true, // 是否启用点击选中行
        uniqueId: "id", // 每一行的唯一标识，一般为主键列
        showToggle: false, // 是否显示详细视图和列表视图的切换按钮
        cardView: false, // 是否显示详细视图
        detailView: false, // 是否显示父子表
        smartDisplay: false,
        responseHandler: function (result) {   // 通过网络请求得到   数据进行解析初始化*******************************
            console.log(result.data);
            if (result != null) {
                return {
                    'total': result.data.count, //总条数*************************************
                    'rows': result.data.list //所有的数据**********************************
                };
            }
            return {
                'total': 0, //总条数
                'rows': [] //所有的数据
            }
        },
        //列表显示
        columns: [{   // 配置显示的列表 ****************************
            field: 'id',
            title: "编号",
        }, {
            field: 'userId',
            title: "会员编号"
        }, {
            field: 'userName',
            title: "会员姓名"
        }, {
            field: 'phone',
            title: "会员手机号",
        }, {
            field: 'address',
            title: "会员地址",
        },{
            field: 'idCard',
            title: "会员身份证号",
        },{
            field: 'status',
            title: "状态",
            formatter: function (value) {
                switch (value) {
                    case 1 :
                        return '<button class="btn-xs btn-info">启用</button>';
                    case 0 :
                        return '<button class="btn-xs btn-danger">禁用</button>';
                }
            }
        },{
            field: 'cardId',
            title: "会员卡ID",
        },{
            field: 'amount',
            title: "会员余额",
        },{
            field: 'operation',
            events: userManage.buttonOperateEvent, // 设置每一行按钮的 点击事件*********************************
            title: '操作',
            formatter: function (value, row, index) {  // 为当前行增加 按钮*******************
                return userManage.buttonOption(value, row, index);
            }
        }
        ]
    });
}

/**
 * 获取具体的参数
 */
userManage.queryParams = function (params) {
    return {
        "pageNumber": params.pageNumber, //当前页数
        "pageSize": params.pageSize, //每页条数
        "searchId": $("#searchId").val(),
        "searchName": $("#searchName").val()
    }
}

/**
 * 刷新列表
 */
userManage.search = function () {
    //bootstrapTable 刷新
    $("#userList").bootstrapTable('refresh');
}

/**
 * 为每一行添加按钮
 * @param value
 * @param row
 * @param index
 * @returns {string}
 */
userManage.buttonOption = function (value, row, index) {
    var returnButton = [];
    returnButton.push('<button class="btn btn-info updateUser">修改</button>');
    returnButton.push('<button class="btn btn-danger delUser">删除</button>');
    return returnButton.join('');
}

/**
 * 按钮的点击事件
 */
userManage.buttonOperateEvent = {
    // 充值 对应的 更新按钮的updateUser
    'click .updateUser': function (e, value, row, index) {

        //1.初始模态框内的数据
        $("#userName").val(row.userName);
        $("#phone").val(row.phone);
        $("#status").val(row.status);
        $("#idCard").val(row.idCard);
        $("#cardId").val(row.cardId);
        $("#amount").val(row.amount);
        $("#address").val(row.address);
        //2.显示  在模态框的确定按钮添加 事件  使用ajax 将用户修改的数据 提交到后台
        $("#myModal").modal('show');


    },

    'click .delUser': function (e, value, row, index) {
        Modal.confirm({
            msg: "确认删除?"  // 配置 确认窗口 ，也必须在html 设置窗口布局
        }).on(function (e) {
            if (e) {
                $.ajax({
                    url: DeleteUserUrl,
                    type: 'post',
                    data: {
                        "userId": row.userId
                    },
                    dataType: 'json',
                    success: function (result) {
                        if (result.status > 0) {
                            toastr['success']("操作成功");
                        } else {
                            toastr['error']("操作失败");
                        }
                        $("#userList").bootstrapTable('refresh');
                    },error:function (result) {
                        toastr['error']("切换失败");
                    }
                })

            }
        })
    }
}

function updateUser() {
    $.ajax({
        url: UpdateUserUrl,
        type:'post',
        data: {
            "userName":$("#userName").val(),
            "phone": $("#phone").val(),
            "status": $("#status").val(),
            "idCard": $("#idCard").val(),
            "cardId": $("#cardId").val(),
            "address": $("#address").val()
        },
        dataType:'json',
        success:function (result) {
            if (result.status > 0) {
                toastr['success']("更新成功");
                $("#myModal").modal('hide');
                userManage.search();
            } else {
                toastr['error']("更新失败");
                userManage.search();
            }
        }
    });
}


